<template>
  <el-row class="tac">

    <el-col :span="24">
      <h5 class="mb-2"></h5>
      <el-menu :collapse="isCollapse" :style="{width:!isCollapse?'230px':'64px'}" active-text-color="#ffd04b"
        background-color="#545c64" class="aside-container" :default-active="active" text-color="#fff">
        <p class="logo-lg">{{isCollapse?'DIDI':'DIDI陪诊'}}</p>
        <TreeMenu :menuData="menuData" :index="1"></TreeMenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup>
  import TreeMenu from '../components/treeMenu.vue'
  import { useRouter } from 'vue-router'
  import { reactive, computed } from 'vue'
  import { useStore } from 'vuex'
  // 创建了一个路由实例，这个实例可以用来访问路由相关的信息和方法，比如当前路径、查询参数、路由状态
  const userouter = useRouter()
  // console.log(userouter);
  // 使用 reactive 函数将这个子路由数组包装成响应式对象
  // const menuData = reactive(userouter.options.routes[0].children)
  const menuData = computed(() => store.state.menu.routerList)
  const store = useStore()
  const isCollapse = computed(() => store.state.menu.isCollapse)
  // 获取高亮
  const active = computed(() => store.state.menu.menuActive)

</script>
<style lang="less" scoped>
  .aside-container {
    height: 100%;

    .logo-lg {
      font-size: 20px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #fff
    }
  }
</style>